import * as React from 'react';
import {View, Text, Button, TextInput, Pressable, Image, ImageRequireSource, ScrollView, StyleSheet, Platform} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import pgcData from '../data/pgc.json';

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

// App enter
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="TabHome">
        <Stack.Screen name="TabHome" component={TabHome} options={{
          headerShown:false
        }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function TabHome() {
  return (
    <Tab.Navigator initialRouteName="Home" >
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Service" component={Service} />
      <Tab.Screen name="Neighbor" component={Neighbor} />
      <Tab.Screen name="Message" component={Message} />
    </Tab.Navigator>
  );
}


function PGCCell(props) {
  return (
    <View style={{height:120, backgroundColor:'white', marginBottom:10, flexDirection:'row'}}>
      <View style={{flex:1, margin:10}} >
        <Text style={{flex:1, fontSize:14}}>{props.title}</Text>
        <View style={{flexDirection:'row'}}>
          <Text style={{fontSize:12, color:'gray', marginRight:10}}>{props.channel}</Text>
          <Text style={{fontSize:12, color:'gray', marginRight:10}}>{props.like}</Text>
          <Text style={{fontSize:12, color:'gray', marginRight:10}}>{props.comment}</Text>
        </View>
      </View>
      <Image style={{flex:1, height:110, marginTop:5, marginRight:10, backgroundColor:'gray'}} source={props.source}/>
    </View>
  )
} 

function TopicCell(props) {
  return(
    <View style={{height:200, backgroundColor:'white', marginBottom:10, padding:10, flexDirection:'column'}}>
      <Text>{props.title}</Text>
      <View style={{flex:1, flexDirection:'row', justifyContent:'center', alignItems:'center'}}>
        <Text style={{lineHeight:120, flex:1, backgroundColor:'#A5BC6A', textAlign:'center', textAlignVertical:'center', color:'white', fontSize:18}}>{props.first}</Text>
        <Text style={{lineHeight:120, flex:1, backgroundColor:'#9CB166', textAlign:'center', textAlignVertical:'center', color:'white', fontSize:18}}>{props.second}</Text>
        <Text style={{lineHeight:120, flex:1, backgroundColor:'#A5BC6A', textAlign:'center', textAlignVertical:'center', color:'white', fontSize:18}}>{props.third}</Text>
      </View>
      <View style={{flexDirection:'row'}}>
          <Text style={{fontSize:12, color:'gray', marginRight:10}}>{props.desc}</Text>
          {/* <Text style={{fontSize:12, color:'gray', marginRight:10}}>{props.like}</Text>
          <Text style={{fontSize:12, color:'gray', marginRight:10}}>{props.comment}</Text> */}
        </View>
      
    </View>
  )
}

// data map to view
const makePGCContent = (styles: any) => {
  return pgcData.data.map((data, i) => (
    data.type == 1 ? 
    <Pressable
          key={i}
          style={styles}>
            <PGCCell title={data.title} channel={data.channel} like={data.like} comment={data.comment} source={{uri: data.source}}/>
          {/* <Text>{'Item ' + i}</Text> */}
        </Pressable> :
      <Pressable
      key={i}
      style={styles}>
        <TopicCell title={data.title} first={data.first} second={data.second} third={data.third} desc={data.desc} />
      {/* <Text>{'Item ' + i}</Text> */}
    </Pressable>
  )) 
}


function Home() {
  return (
    <ScrollView>{makePGCContent({})}</ScrollView>
  )
}


function ServiceCell() {
  return (
    <View style={{flex:1, margin:10, backgroundColor:'white', flexDirection:'row'}}>
      <View style={{flex:1, flexDirection:'column', alignItems:'center'}}>
        <Image style={{height:30, width:30}} source={require('./images/btn_fulish.png')}/>
        <Text style={{fontSize:12, marginTop:8}}>数字社区</Text>
      </View>
      <View style={{flex:1, flexDirection:'column', alignItems:'center'}}>
        <Image style={{height:30, width:30}} source={require('./images/btn_fulish.png')}/>
        <Text style={{fontSize:12, marginTop:8}}>数字社区</Text>
      </View>
      <View style={{flex:1, flexDirection:'column', alignItems:'center'}}>
        <Image style={{height:30, width:30}} source={require('./images/btn_fulish.png')}/>
        <Text style={{fontSize:12, marginTop:8}}>数字社区</Text>
      </View>
      <View style={{flex:1, flexDirection:'column', alignItems:'center'}}>
        <Image style={{height:30, width:30}} source={require('./images/btn_fulish.png')}/>
        <Text style={{fontSize:12, marginTop:8}}>数字社区</Text>
      </View>
    </View>
  )
}

function Service() {
  return (
    <ScrollView style={{backgroundColor:'white'}}>
      <Image style={{height:140}} source={require('./images/banner.png')}/>
      <Text style={{margin:10, fontSize:14, fontWeight:'bold'}}>手机开门</Text>
      <View style={{height:100, backgroundColor:'white'}}>
        <Text>ddd</Text>
      </View>
      <Text style={{margin:10, fontSize:14, fontWeight:'bold'}}>物业通知</Text>
      <ServiceCell/>
      <ServiceCell/>
      <ServiceCell/>
      <ServiceCell/>
      <ServiceCell/>
      <Text style={{fontSize:10, textAlign:'center', color:'gray', margin:10}}>如有疑问，请咨询 
      <Text style={{color:'#6495ED'}}> 400900909</Text>
      </Text>
    </ScrollView>
  )
}


function NeighborCell() {
  return (
    <View style={{flexDirection:'row', height:230, margin:10}}>
      <Image style={{height:40, width: 40}} source={require('./images/banner.png')}/>
      <View style={{flex:1, marginLeft:10}}>
        <Text>来自<Text style={{color:'#6495ED'}}>深圳市海文花园</Text></Text>
        <Text style={{color:'gray', fontSize:12, marginTop:5}}>15小时前</Text>
        <View style={{backgroundColor:'#DCDCDC', flex:1, marginTop: 10, alignContent:'center', alignItems:'center'}}>
          <Text style={{lineHeight:150, fontSize:24, color:'gray'}}>是的</Text>
        </View>
        <Text style={{backgroundColor:'#DCDCDC', marginTop:5, height:22, lineHeight: 22, width:130, color:'#6495ED'}}>#气温是有记忆的吗</Text>
        <View style={{flexDirection:'row'}}>
          <Text style={{color:'gray', marginTop:4}}>1赞</Text>
          
          <Text style={{flex:1}}></Text>
          <Text style={{flexDirection:'row-reverse'}}>...</Text>
        </View>
      </View>
      <View></View>
    </View>
  )
}

function NeighborSelect() {
  return (
    <View></View>
  )
}


function Neighbor() {
  return (
    <ScrollView style={{backgroundColor:'white'}}>
      <NeighborCell/>
      <View style={{flex:1, height:8, backgroundColor:'#F5F5F5'}}></View>
      <NeighborCell/>
      <View style={{flex:1, height:8, backgroundColor:'#F5F5F5'}}></View>
      <NeighborCell/>
      <View style={{flex:1, height:8, backgroundColor:'#F5F5F5'}}></View>
      <NeighborCell/>
      <View style={{flex:1, height:8, backgroundColor:'#F5F5F5'}}></View>
      <NeighborCell/>
    </ScrollView>
  )
}

function Message() {
  return (
    <View style={{alignItems:'center'}}>
      <Image style={{height:150, width: 150, resizeMode:'contain', marginTop: 130}} source={require('./images/pic_default_page.png')}/>
      <Text style={{fontSize:12, color:'gray', marginTop:-10}}>这里是一片荒漠，什么也没有</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  dialog: {
    padding: 16,
    width: '90%',
    maxWidth: 400,
    borderRadius: 3,
    backgroundColor: '#fff'
  },
  backdrop: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
  },
  text: {
    alignSelf: 'center',
    marginVertical: 10,
  },
  button: {
    alignSelf: 'center',
    marginVertical: 10,
    backgroundColor: '#0ac'
  },
  pgccell: {
    height: 100,
    backgroundColor: 'gray'
  }
});

export default App;
